<template>
  <el-select
    v-model="selectedValue"
    placeholder="请选择"
    @change="handleChange"
  >
    <el-option
      v-for="item in datas"
      :key="item.id"
      :label="getOptionLabel(item)"
      :value="item.id"
      style="user-select: none;"
      :disabled="!isOptionEnabled(item)"
    >
      <span style="font-weight: bolder;">{{ item.des }} - {{ item.belong }}</span>
      <span style="float: right;font-weight: bolder; color: #8492a6; font-size: 13px">
        {{ getStateLabel(item.state) }} | {{ item.price }}元/24h  {{ getDoorStatus(item.isclosed) }}
      </span>
    </el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    datas: { type: Array, required: true }
  },
  data()
  {
    return {
      selectedValue: null
    }
  },
  methods: {
    getOptionLabel(item)
    {
      return `${item.des} - ${item.belong}`
    },
    getStateLabel(state)
    {
      switch (state)
      {
      case '0':
        return '空闲'
      case '1':
        return '占用'
      case '2':
        return '维护'
      default:
        return '未知状态'
      }
    },
    getDoorStatus(isclosed)
    {
      return isclosed === '1' ? '已关门' : '未关门'
    },
    isOptionEnabled(item)
    {
      // 只有 state 为 '0' 且 isclosed 为 '1' 的选项可选
      return item.state === '0' && item.isclosed === '1'
    },
    handleChange(selectedId)
    {
      // 触发自定义事件，将选中的 id 传递给父组件
      this.$emit('change', selectedId)
    }
  }
}
</script>

<style scoped>
.el-select {
  width: 100%;
  max-width: 500px;
  user-select: none;
}
</style>
